<template>
	<view class="container">
		<!-- 列表内容 -->
		<view class="list-container">
			<view v-if="listData.length === 0" class="empty-list">
				<text class="empty-text">暂无项目，请点击添加按钮创建项目</text>
			</view>
			<view v-else class="list-item" v-for="(item, index) in listData" :key="item.id">
				<image class="item-image" src="/static/首页.png" mode="aspectFill"></image>
				<view class="item-content">
					<view class="item-info">
						<text class="item-title">{{item.title}}</text>
						<view class="item-details">
							<text class="item-detail">{{item.sampleType}}</text>
							<text class="item-detail">{{item.liquidType}}</text>
						</view>
					</view>
					<view class="item-actions">
						<button class="action-btn query-btn" @click="handleQuery(item)">计算</button>
						<button class="action-btn detail-btn" @click="handleViewDetail(item)">详情</button>
						<button class="action-btn delete-btn" @click="handleDelete(item)">删除</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 悬浮添加按钮 -->
		<view class="float-btn" @click="handleAdd">
			<text class="plus-icon">+</text>
		</view>
	</view>
</template>

<script setup>
import {onShow} from '@dcloudio/uni-app'
import { ref, onMounted} from 'vue'

// 项目列表数据
const listData = ref([])
// 当前要删除的项目
const currentDeleteItem = ref(null)

// 页面加载时获取项目列表
onMounted(() => {
	loadProjectList()
})

// 每次页面显示时刷新数据
onShow(() => {
	loadProjectList()
})

// 加载项目列表数据
const loadProjectList = () => {
	const projectList = uni.getStorageSync('projectList') || []
	// 按创建时间降序排列，最新创建的项目显示在最前面
	listData.value = projectList.sort((a, b) => {
		return new Date(b.createTime) - new Date(a.createTime)
	})
}

const handleAdd = () => {
	// 添加按钮点击事件
	uni.navigateTo({
		url: '/pages/create_project/create_project'
	})
}

const handleQuery = (item) => {
	// 查询按钮点击事件
	uni.navigateTo({
		url: `/pages/project/project?id=${item.id}&title=${item.title}`
	})
}

// 查看详情
const handleViewDetail = (item) => {
	if (!item.analysisResults || item.analysisResults.length === 0) {
		uni.showToast({
			title: '该项目暂无分析结果',
			icon: 'none'
		})
		return
	}
	
	// 跳转到详情页面
	uni.navigateTo({
		url: `/pages/project_detail/project_detail?id=${item.id}`
	})
}

// 由于uni-popup可能不可靠，我们创建一个通用的删除确认函数
const showDeleteConfirm = (item) => {
	// 保存当前要删除的项目
	currentDeleteItem.value = item
	
	// 使用uni.showModal替代弹窗组件
	uni.showModal({
		title: '确认删除',
		content: '确定要删除该项目吗？此操作无法撤销。',
		confirmColor: '#ff4d4f',
		success: function(res) {
			if (res.confirm) {
				confirmDelete()
			} else {
				cancelDelete()
			}
		}
	})
}

// 删除按钮点击
const handleDelete = (item) => {
	// 直接使用可靠的showModal
	showDeleteConfirm(item)
}

// 确认删除
const confirmDelete = () => {
	if (currentDeleteItem.value) {
		try {
			// 获取项目列表
			const projectList = uni.getStorageSync('projectList') || []
			// 过滤掉要删除的项目
			const updatedList = projectList.filter(item => item.id !== currentDeleteItem.value.id)
			// 更新存储
			uni.setStorageSync('projectList', updatedList)
			// 重新加载列表
			loadProjectList()
			
			// 提示删除成功
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			})
		} catch (error) {
			console.error('删除项目失败:', error)
			uni.showToast({
				title: '删除失败',
				icon: 'none'
			})
		} finally {
			// 清空当前要删除的项目
			currentDeleteItem.value = null
		}
	}
}

// 取消删除
const cancelDelete = () => {
	// 清空当前要删除的项目
	currentDeleteItem.value = null
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	position: relative;
}

.list-container {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.empty-list {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 40rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	text-align: center;
}

.list-item {
	display: flex;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.item-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.item-content {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item-info {
	display: flex;
	flex-direction: column;
}

.item-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.item-details {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.item-detail {
	font-size: 24rpx;
	color: #666;
	background-color: #f0f0f0;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.item-actions {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	margin: 0;
	padding: 0 20rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 30rpx;
}

.query-btn {
	background-color: #f0f0f0;
	color: #666;
}

.detail-btn {
	background-color: #e6f7ff;
	color: #1890ff;
}

.delete-btn {
	background-color: #fff1f0;
	color: #ff4d4f;
}

.float-btn {
	position: fixed;
	right: 40rpx;
	bottom: 40rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #1890ff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
	transition: all 0.3s;
}

.float-btn:active {
	transform: scale(0.95);
}

.plus-icon {
	color: #ffffff;
	font-size: 50rpx;
	font-weight: 300;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
</style>
